import { useQuasar } from '@teld/q-components';
import Component from '@teld/q-components/Input';
import useMappingProps from 't/common/hooks/useMappingProps';
import {
  commonProps,
  fixNameSpace,
  pickOwnForBasicComponent,
} from 't/common/utils';
import { computed, defineComponent, onMounted, ref } from 'vue';
import LabelPrefixWraper from '../label-prefix-wraper';
import styles from './index.module.scss';
import './index.scss';

export * from '@teld/q-components/Input';

export default defineComponent({
  name: fixNameSpace('textarea'),
  props: {
    ...commonProps,
    ...Component.props,
    ...LabelPrefixWraper.props,
    demo: {
      type: String,
      default() {
        return '';
      },
    },
    label: {
      type: String,
      default() {
        return '';
      },
    },
    placeholder: {
      type: String,
      default() {
        return '';
      },
    },
    bgColor: {
      type: String,
      default() {
        return '#ffffff';
      },
    },
    labelPosition: {
      type: String,
      default() {
        return 'top';
      },
    },
    dense: {
      type: Boolean,
      default() {
        return true;
      },
    },
    autoResizeEnabled: {
      type: Boolean,
      default() {
        return undefined;
      },
    },
    minHeight: {
      type: Number,
      default() {
        return 100;
      },
    },
    showClearButton: Boolean,
    maxLength: {
      type: Number
		},
		tabIndex: String
  },
  emits: ['click', 'focus', 'change', 'blur', 'keydown'],

  setup(props, { attrs, emit, expose, slots }) {
    const $q = useQuasar();

    const refComponent = ref();
    const [mappingProps, mappingExpose] = useMappingProps(props, {
      clear() {
        refComponent.value.clear(...arguments);
      },
      validate() {
        return refComponent.value.validate(...arguments);
      },
      resetValidation() {
        refComponent.value.resetValidation(...arguments);
      },
      update() {
        refComponent.value.update(...arguments);
      },
      focus() {
        refComponent.value.focus(...arguments);
      },
      blur() {
        refComponent.value.blur(...arguments);
      },
    });

    expose(mappingExpose);

    onMounted(() => {});

    let clearable = computed(() => {
      return mappingProps.showClearButton ?? mappingProps.clearable;
    });
        let disable = computed(() => {
          let db = mappingProps.disable || mappingProps.disabled;
          let shouldSetBgColor = db;
          return {
            bgColor: shouldSetBgColor ? '#f1f1f1' : mappingProps.bgColor,
            disable: db,
          };
        });
    let labelPosition = computed(() => {
      if ($q.platform.is.mobile) {
        return 'top';
      }
      return mappingProps.labelPosition;
    });

    function onClickHandler(params) {
      emit('click', params);
    }
    function onFocus(params) {
      emit('focus', params);
    }
    function onChange(params) {
      emit('change', params);
    }
    function onBlur(params) {
      emit('blur', params);
    }
    function onKeydown(params) {
      emit('keydown', params);
    }

    let maxlength = computed(() => {
      let ml = mappingProps.maxLength || mappingProps.maxlength;
      return {
        counter: mappingProps.counter || !!ml,
        maxlength: ml,
      };
    });
    let attrs_ = { ...attrs };
    delete attrs_['data-uid'];
    delete attrs_['data-tag'];
    delete attrs_['class'];
    delete attrs_['style'];

    return () => {
      return (
        <div
          class={[
            'tr-textarea-default',
            labelPosition.value == 'top' && 'tr-textarea-default-top',
          ]}
          v-show={mappingProps.visible}
          tabindex='-1'
          {...attrs}
        >
          <LabelPrefixWraper
            required={mappingProps.required}
            label={mappingProps.label}
            labelProps={{ class: 'textarea-title' }}
            hideLabel={mappingProps.hideLabel}
            labelPosition={labelPosition.value}
            helpConf={mappingProps.helpConf}
            readonly={mappingProps.readonly}
            helpTooltip={mappingProps.helpTooltip}
            helpPlacement={mappingProps.helpPlacement}
            helpMore={mappingProps.helpMore}
            helpMorePopup={mappingProps.helpMorePopup}
            helpMoreLink={mappingProps.helpMoreLink}
            helpMoreLinkHrefStatic={mappingProps.helpMoreLinkHrefStatic}
            helpMoreLinkHrefExp={mappingProps.helpMoreLinkHrefExp}
          ></LabelPrefixWraper>
          <Component
            ref={refComponent}
            class={['t-textarea', 'counter_bg', styles.module]}
            {...attrs_}
            {...pickOwnForBasicComponent(mappingProps, Component.props, attrs)}
            inputStyle={{
              ...mappingProps.inputStyle,
              minHeight: `${mappingProps.minHeight - 2}px`
            }}
            autogrow={mappingProps.autoResizeEnabled || mappingProps.autogrow}
            {...maxlength.value}
            label={undefined}
            borderless
            tabindex={mappingProps.tabIndex ? mappingProps.tabIndex : 0}
            {...disable.value}
            clearable={clearable.value}
            placeholder={mappingProps.placeholder}
            type='textarea'
            onClick={onClickHandler}
            onKeydown={onKeydown}
            onUpdate:modelValue={onChange}
            onFocus={onFocus}
            onBlur={onBlur}
            // v-slots={{ ...slots }}
          >
            {slots}
          </Component>
        </div>
      );
    };
  },
});
